<template>
	<view class="list-main" style="height: 100%;">
		<view class="top-filter" :style="`z-index:${zIndex};`">
			<up-search @search="getList" :clearabled="true" :show-action="true" @change="searchChange" @custom="getList" style="padding: 5px 15px 0;" placeholder="根据议题、类型、人员、地点查询"
				v-model="keyWord"></up-search>
			<up-dropdown @open="zIndex='99'" @close="zIndex='0'">
				<up-dropdown-item v-model="typeFilter" title="类型" :options="options1"
					@change="getList"></up-dropdown-item>
				<up-dropdown-item v-model="positionFilter" title="区域" :options="options2"
					@change="getList"></up-dropdown-item>
			</up-dropdown>
		</view>
		<!-- #ifdef APP -->
		<scroll-view scroll-y="true" style="height:90%;padding-top: 80px;" @scrolltolower="scrolltolower"
			@refresherpulling="onPulling" @refresherrestore="onRestore" @refresherrefresh="refresherrefresh"
			:refresher-enabled="true" :refresher-triggered="triggered">
		<!-- #endif -->
			<view class="list-item" v-for="(item ,index) in partList" :key="index" @click="goToPage(item)">
				<image src="../../static/list/leave_q.png" class="biao"></image>
				<view class="item-info">
					<view class="name">{{item.F_HYYT}}</view>
					<view class="user">
						<text class="user-item">{{item.F_SQR}}</text>
						<text class="user-item">{{item.F_JZSJ.split(' ')[0]}}</text>
						<text class="user-item">{{item.F_HYLX}}</text>
					</view>
					<image src="../../static/list/right.png" class="right"></image>
				</view>
			</view>
			<!-- <view class="loading-text">
			正在加载...
		</view> -->
			<view class="loading-text">
				暂无更多
			</view>
		<!-- #ifdef APP -->
		</scroll-view>
		<!-- #endif -->
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue"

	import RequestURL from "../../util/request.js";
	let zIndex = ref('0')

	let options1 = [{
			label: '全部',
			value: 'all',
		},
		{
			label: '参加',
			value: 'yes',
		},
		{
			label: '不参加',
			value: 'no',
		}
	]
	let options2 = [{
			label: '无',
			value: '',
		}, {
			label: '科研园区',
			value: 'kyyq',
		},
		{
			label: '轮台基地',
			value: 'ltjd',
		},
		{
			label: '其他区域',
			value: 'qtqy',
		}
	]
	let changeBusiness = (data) => {
		refresherrefresh()
	}

	let changeBill = (data) => {
		refresherrefresh()
	}

	let keyWord = ref('')
	let typeFilter = ref('');
	let positionFilter = ref('');
	let searchChange = (type)=>{
		if (!type) {
			setTimeout(()=>{
				getList()
			},100)
		}
	}

	let partList = ref([])

	// console.log(requestUrl);
	var pagecount = 50;
	var page = 1;
	let hasmore = ref(true);
	let listData = ref([])
	let triggered = ref(false)
	let onPulling = (e) => {
		triggered.value = true;
	}
	let getList = (t) => {
		page = 1;
		console.log(t);
		uni.showLoading({
			title: '加载中'
		});
		setTimeout(() => {
			var filesURL = RequestURL.getRequestURL('getMeetCXList');
			// var pageType = plus.webview.currentWebview().pageType;
			var userInfo = uni.getStorageSync('$state') || "{}";
			var userJSON = userInfo
			var userid = userJSON.account;
			var version = userJSON.version;
			var tocket = userJSON.tocket;
			let qylx = positionFilter.value;
			let ifcj = typeFilter.value;
			var data = {
				userid: userid,
				version: version,
				tocket: tocket,
				nowPage: page,
				pageSize: pagecount,
				type: 'meetCX',
				ifcj: ifcj,
				qylx: qylx,
				searchBoxInfo: keyWord.value
			};
			uni.request({
				url: filesURL,
				method: 'GET',
				timeout: 10000,
				dataType: 'json',
				data: data,
				header: {
					'Accept': '*/*',
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				success: (res) => {
					let data = res.data;
					console.log(res.data);
					console.log(res.data.values.length);
					console.log(res.data.values);
					if (data.return_code == "SUCCESS") {
						if (data.values.length == 0) {
							hasmore.value = false
						} else {
							listData.value = data.values;
							let stareData = (page - 1) * pagecount;
							let endData = stareData + pagecount
							partList.value = data.values.slice(stareData, endData);
						}
					} else {
						// return callback(res.return_msg);
						uni.showToast({
							title: '请求数据失败！' + res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
				},
				fail: (res) => {
					uni.showToast({
						title: '服务器异常链接失败',
						icon: 'none',
						duration: 2000
					})
				},
				complete: () => {
					uni.hideLoading();
				}
			})
		}, 200)
	}

	getList('load')

	let scrolltolower = () => {
		page++;
		let stareData = (page - 1) * pagecount;
		let endData = stareData + pagecount
		partList.value.push(...listData.value.slice(stareData, endData))
	}

	let refresherrefresh = () => {
		page = 1;
		getList('refresherrefresh');
		setTimeout(() => {
			triggered.value = false;
		}, 4000)
	}

	let onRestore = () => {
		triggered.value = 'restore'; // 需要重置
	}


	function chkResponse(d) {
		if (d.return_code == "FAIL") {
			uni.showToast({
				title: "请求数据失败！" + d.return_msg,
				icon: 'none',
				duration: 2000
			})
			return false;
		}
		if (d.expire_time != "") {
			var myDate = new Date();
			if (myDate.getTime() > d.expire_time) {
				uni.showToast({
					title: "请求过期！",
					icon: 'none',
					duration: 2000
				})
				return false;
			}
		}
		return d.values;

	}

	let goToPage = (item) => {
		uni.navigateTo({
			url: '/pages/info/info?id=' + item.F_DJBH
		})
	}
</script>

<style lang="scss">
	.list-item {
		display: flex;
		align-items: center;
		flex-direction: row;
		width: 100%;
		box-sizing: border-box;
		padding-left: 15px;

		.biao {
			width: 50px;
			height: 50px;
			margin-right: 10px;
		}

		.item-info {
			border-bottom: 1rpx solid #ccc;
			flex: 1;
			padding: 15px 0 15px 5px;
			position: relative;
		}

		.name {
			// font-weight: bold;
			margin-bottom: 5px;
			font-size: 16px;
		}

		.user,
		.user-item {
			flex-direction: row;
			font-weight: normal;
			color: #aaa;
			font-size: 15px;
		}

		.user-item {
			margin-right: 7.5px;
		}

		.right {
			width: 15px;
			height: 15px;
			position: absolute;
			right: 15px;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.loading-text {
		text-align: center;
		padding: 20px 0;
		font-size: 16px;
	}

	.top-filter {
		background: #fff;
		height: 80px;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 5;
	}
</style>